<template>
	<view>
		<view class="search">
			<view class="search_left">
				<uni-icons class="search_icon" color="#707070" size="18" type="search" />
				<input class="search_input" v-model="userName" placeholder-class="search_hover" confirm-type="search" placeholder="请输入顾问名称" @confirm="reqUserByRole()"/>
			</view>
			<view class="search_right" @click="reqUserByRole()">搜索</view>
			<view class="clear"></view>
		</view>
		<view class="list">
			<view class="list_content" v-for="(value,index) in adviserList" :key="index">
				<image class="list_avatar" src="/static/images/user_avatar.png" />
				<view class="list_info">
					<view class="list_name">{{ value.userName }}</view>
					<view class="list_role">销售顾问</view>
				</view>
				<view class="list_select" v-if="value.userId == salesmanId" @click="select_user(value.userId)">
					选择
					<image src="../../../../static/images/allocation_select1.png" />
				</view>
				<view class="list_select" v-else @click="select_user(value.userId)">
					选择
					<image src="../../../../static/images/allocation_select2.png" />
				</view>
			</view>
		</view>
		<view class="allocation">
			<view class="cancel" @click="goBack">取消</view>
			<view class="submit" @click="submitForm">确认分配</view>
		</view>
	</view>
</template>

<script>
	import {
		uniqueManual,
		getUserByRoleId
	} from '@/service/api/api.js';
	export default {
		components: {
			
		},
		data() {
			return {
				adviserList: [],
				userName: '',
				salesmanId: '',
				ids: []
			}
		},
		onLoad() {
			this.ids = uni.getStorageSync('assignIds') || []
			console.log(this.ids,"线索的id")
			this.reqUserByRole()
		},
		onUnload() {
			uni.removeStorageSync('assignIds')
		},
		methods: {
			select_user(val) {
				this.salesmanId = val
			},
			
			reqUserByRole(){
				getUserByRoleId({
					userName: this.userName,
					userDeptId: uni.getStorageSync('user_info').userDeptId,
					roleId: '150',					
				}).then(res => {
					if(res.data.code == '0') {
						this.adviserList = res.data.data
					}
				})
					
			},
			
			submitForm() {
				if(!this.salesmanId) {
					uni.showToast({
						icon: "none",
						title: '请选择销售顾问'
					})
					return false
				}
				let data = {
					ids: this.ids,
					deptId: uni.getStorageSync('user_info').userDeptId,
					userId: uni.getStorageSync('user_info').userId,
					salesmanId: this.salesmanId,
				}
				uniqueManual(data).then(res=>{
					if(res.data.code == '0') {
						uni.showToast({
							icon: "none",
							title: '分配成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							icon: "none",
							title: '请选择要分配的线索'
						})
					}
				})
			},
			
			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.allocation {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 96rpx;
		line-height: 96rpx;
		display: flex;
		font-size: 32rpx;
		text-align: center;
		color: #fff;
		box-sizing: border-box;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px -4px 8px rgba(116, 169, 255, 0.15);
	}

	.cancel {
		width: 50%;
		color: #3B86FF;
		box-sizing: border-box;
		
	}

	.submit {
		width: 50%;
		background: #3B86FF;
		box-sizing: border-box;
	}

	.search_hover {
		color: rgba(67, 66, 93, 0.5);
	}

	.search_icon {
		margin-left: 16rpx;
		margin-top: 3rpx;
	}

	.search {
		margin-top: 66rpx;
		padding-left: 50rpx;
		padding-right: 30rpx;
	}

	.search_input {
		height: 64rpx;
		line-height: 64rpx;
		margin-left: 62rpx;
		font-size: 28rpx;
		color: #43425D;
	}

	.search_left {
		display: flex;
		width: 480rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #F5F6FA;
		border-radius: 8rpx;
		float: left;
	}

	.search_right {
		font-size: 26rpx;
		text-align: center;
		color: #fff;
		float: right;
		width: 184rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #3B86FF;
		border-radius: 8rpx;
	}

	.list {
		padding-top: 22rpx;
		padding-bottom: 96rpx;
	}

	.list_content {
		display: flex;
		padding: 43rpx 20rpx;
		margin: 0 30rpx;
		margin-bottom: 30rpx;
		color: #43425D;
		box-shadow: 0px 6px 12px rgba(186, 204, 233, 0.28);
	}

	.list_avatar {
		width: 88rpx;
		height: 88rpx;
	}

	.list_info {
		width: 420rpx;
		padding-left: 30rpx;
	}

	.list_name {
		/* width: 80%; */
		font-size: 32rpx;
		line-height: 32rpx;
		padding-top: 6rpx;
	}

	.list_role {
		font-size: 24rpx;
		line-height: 24rpx;
		opacity: 0.7;
		font-weight: 400;
		padding-top: 16rpx;
		
	}

	.list_select {
		flex: 1;
		font-size: 24rpx;
		line-height: 40rpx;
		padding-top: 24rpx;
	}

	.list_select image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 12rpx;
		margin-top: 1rpx;
	}
</style>
